extends layout

block content
  h5= title
  div 1线压力：
    span(id='Line_1' class='badge badge-pill badge-primary')
  div 2线压力：
    span(id='Line_2' class='badge badge-pill badge-info')
  div(
    id='container_1'
    style='min-width:400px;height:400px'
  ) 
  div(
    id='container_2'
    style='min-width:400px;height:400px'
  ) 

append scripts
  script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.slim.js')

  script(src='javascripts/highcharts.js')
  script(src='javascripts/exporting.js')
  script(src='javascripts/highcharts-ZH_CN.js')

  script.   
    //data 
    let _x = 0;
    let _y = 0;
    let _name = '';

    var chart_1 = {};  
    var chart_2 = {};
    let uri = 'http://' + document.domain + ':' + location.port + '/';
    //let uri = 'http://192.168.1.100:8086/';
    var socket = io(uri);
    socket.on('connect', function(){
      console.log('已连接');

      socket.on('hi', function(msg){
        console.log(msg);
      });

      socket.on('pressure', function(msg){
        //console.log(msg.nm+':'+msg.dt);
        $('#' + msg.nm).html(msg.p);
        let dt = new Date(msg.dt);
        _x = Date.UTC(dt.getFullYear(), dt.getMonth(), dt.getDate(), dt.getHours(), dt.getMinutes(), dt.getSeconds());
        _y = msg.p;
        _name = msg.nm;

        let series = {};
        let chart = {};
        if (_name === 'Line_1') {          
          series = chart_1.series[0];
          chart = chart_1;
        }
        if (_name === 'Line_2') {
          series = chart_2.series[0];
          chart = chart_2;
        }
        series.addPoint([_x, _y], true, true);
        let points = series.points;
        chart.tooltip.refresh(points[points.length -1]);
      });

      socket.on('disconnect', function(){
        console.log('失去连接');
      });
    });

    //charts 
    Highcharts.setOptions({
      global: {
        useUTC: true,
      } });

    chart_1 = Highcharts.chart('container_1', {
      chart: {
        type: 'spline',
        marginRight: 10,
        events: {
          load: function () {
            // load evt
          }
        }
      },
      title: {
        text: '1线压力'
      },
      xAxis: {
        type: 'datetime',
        title: {
          text: null
        }
      },
      yAxis: {
        title: {
          text: null
        }
      },
      tooltip: {
        formatter: function () {
          return '<b>' + this.series.name + '</b><br/>' +
            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
            Highcharts.numberFormat(this.y, 2);
        }
      },
      legend: {
        enabled: false
      },
      series: [
        {
          name: '1线数据',
          data: [0,1,1,1,1,1,1,1,1,1,1,1,1,1],
        }
      ]
    });

    chart_2 = Highcharts.chart('container_2', {
      chart: {
        type: 'spline',
        marginRight: 10,
        events: {
          load: function () {
            // load evt
          }
        }
      },
      title: {
        text: '2线压力'
      },
      xAxis: {
        type: 'datetime',
        title: {
          text: null
        }
      },
      yAxis: {
        title: {
          text: null
        }
      },
      tooltip: {
        formatter: function () {
          return '<b>' + this.series.name + '</b><br/>' +
            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
            Highcharts.numberFormat(this.y, 2);
        }
      },
      legend: {
        enabled: false
      },
      series: [
        {
          name: '2线数据',
          data: [0,1,1,1,1,1,1,1,1,1,1,1,1,1],
        }
      ]
    });

